<template>
    <div class="app-container">
        <EventInfoCard :eventInfo="eventInfo" />
        <a-card class="box-card" :cardOpen="true" :style="{ marginTop: '15px' }" v-for="item in handles" :key="item.renderKey">
            <div slot="header">
                <span> {{ item.title }} {{ item.isOld == 0 ? "(当前)" : "(已停止处置)" }} </span>
            </div>
            <div slot="header-toolbtn" v-if="item.isOld == 0">
                <el-button type="warning" size="mini" icon="el-icon-search" @click="handleSearchDoc">搜索知识库相关文档 </el-button>
                <el-button type="success" size="mini" icon="el-icon-s-promotion" @click="showMap">地图指挥 </el-button>
            </div>
            <handle-detail-card :plan="item.planDetail" :handleId="item.handleId" :handleing="item.isOld == 0" />
        </a-card>
        <match-docs ref="matchDocs" />
        <doc-search ref="docSearchDialog" />
        <MapView ref="mapView" @openCamera="handleOpenCamera" />
        <CameraView ref="cameraViewRef" />
    </div>
</template>
<script>
import ACard from "@/views/components/a-card/card.vue";
import * as HandleApi from "@/api/response/handle.js";
import * as DrillApi from "@/api/drill/drill.js";
import HandleDetailCard from "./module/HandleDetailCard.vue";
import MatchDocs from "./components/MatchDocs.vue";
import DocSearch from "@/views/components/docSearch/DocSearch.vue";
import EventInfoCard from "./module/EventInfoCard.vue";
import MapView from "./components/MapView.vue";
import { getHandleInfo } from "@/api/response/handleInfo";
import { handleEventInfo as getHandlesList } from "@/api/response/handle";
import { getPlanEventInfo } from "@/api/rescue/rescue";
import CameraView from "./components/CameraView.vue";

export default {
    name: "HandleDetail",
    components: {
        ACard,
        HandleDetailCard,
        MatchDocs,
        DocSearch,
        EventInfoCard,
        MapView,
        CameraView,
    },

    data() {
        return {
            dutyInfo: null,
            eventInfo: {},
            groups: [],
            currentGroup: {
                flowId: 1,
                flowTitle: "组建领导小组",
                roleList: [
                    {
                        deptId: 0,
                        userName: "测试",
                    },
                    {
                        deptId: 0,
                        userName: "测试",
                    },
                ],
            },
            responseLevelOption: [
                {
                    label: "Ⅰ级响应",
                    value: 1,
                },
                {
                    label: "Ⅱ级响应",
                    value: 2,
                },
                {
                    label: "Ⅲ级响应",
                    value: 3,
                },
                {
                    label: "Ⅳ级响应",
                    value: 4,
                },
            ],
            staffPickType: "",
            chiefName: "",
            activeScene: "",
            sceneTabs: [],
            hdInfoId: 0,
            drillPlanId: 0,
            drillGroups: [],
            handles: [],
            globalKey: 100,
            modelId: 0,
            infoId: 0,
        };
    },
    computed: {},
    watch: {},
    provide() {
        return {
            groups: () => this.drillGroups,
        };
    },
    created() {},
    mounted() {
        this.hdInfoId = this.$route.query.hdInfoId;
        this.getHandleInfo();
    },
    computed: {
        eventCenter() {
            if (this.eventInfo.coordinate != "" && this.eventInfo.coordinate != null) {
                return this.eventInfo.coordinate.split(",");
            }
        },
    },
    methods: {
        getHandleInfo() {
            // 获取处置的基本信息
            getHandleInfo(this.hdInfoId).then(hdInfo => {
                if (hdInfo.data.infoId) {
                    getPlanEventInfo(hdInfo.data.infoId).then(res => {
                        this.eventInfo = res.data;
                    });
                }
                getHandlesList(this.hdInfoId).then(hds => {
                    console.log(hds);
                    let handles = [];
                    hds.data.forEach(h => {
                        let level = this.responseLevelOption.find(val => val.value == h.responseLevel);
                        handles.push({
                            title: `${h.planDetail.planName} - ${level.label}`,
                            isOld: h.isOld,
                            planDetail: h.planDetail,
                            handleId: h.handleId,
                        });
                    });
                    this.handles = handles;
                });
            });
        },
        getDrillGroupRoles() {
            DrillApi.getDrillGroupRole(this.handles[0].handleId).then(res => {
                this.drillGroups = res.data;
            });
        },
        handleDrillDetail() {
            this.$tab.openPage("事件详情", "/guard/event/detail", {
                infoId: this.infoId,
                modelId: this.modelId,
            });
        },
        handleChangeResponseLevel(item) {
            this.$refs.eventResponseLevelSet.showDialog(item);
        },
        onResponseLevelSet(data) {
            HandleApi.setHandleResponseLevel({
                handleId: data.handleId,
                responseLevel: data.responseLevel,
                status: data.status,
                planId: data.planId,
            }).then(res => {
                this.$modal.msgSuccess("响应级别调整成功");
                this.getHandleInfo();
            });
        },
        showMap() {
            var eventCenter = null;
            if (this.eventInfo.coordinate != "" && this.eventInfo.coordinate != null) {
                eventCenter = this.eventInfo.coordinate.split(",");
            }
            this.$refs.mapView.showMap({
                eventInfo: {
                    eventCenter,
                    eventName: this.eventInfo.name,
                },
            });
        },
        handleSearchDoc() {
            this.$refs.docSearchDialog.show();
        },
        handleOpenCamera() {
            this.$refs.cameraViewRef.show(document.title, "63010010001320073137");
        },
    },
    beforeDestroy() {
        this.$bus.$emit("monitor-detail-destroy");
    },
};
</script>
<style lang="scss" scoped>
.box-card {
    .change-response-level {
        padding: 0;
        margin-left: 15px;
    }
}
</style>
